<template>
	<div>
		<el-tag
		  :key="tag"
		  v-for="tag in tabList"
		  closable
		  :disable-transitions="false"
		  @close="handleClose(tag)">
		  {{tag}}
		</el-tag>
		<el-input
		  class="input-new-tag"
		  v-if="inputVisible"
		  v-model="inputValue"
		  ref="saveTagInput"
		  size="small"
		  @keyup.enter.native="handleInputConfirm"
		  @blur="handleInputConfirm"
		>
		</el-input>
		<el-button v-else class="button-new-tag" size="small" @click="showInput">点击添加</el-button>
	</div>
</template>

<script>
	export default {
		name:"gz-tabs",
		props:{
			value:{
				type:[String,Array],
				default:[]
			}
		},
		watch: {
		  value(newValue,oldValue){
			  this.setTabList(newValue)
		  }
		},
		data(){
			return{
				tabList: [],
				inputVisible: false,
				inputValue: ''
			}
		},
		mounted() {
			
		},
		methods:{
			setTabList(value){
				console.info("tabs回显",value,value instanceof String,value instanceof Array)
				if(value instanceof String){
					value.split(",").forEach(item=>{
						this.tabList.push({
						  url:item
						})
					})
				}else if(value instanceof Array){
					value.forEach(item=>{
						this.tabList.push(item)
					})
				}
			},
			handleClose(tag) {
			  this.tabList.splice(this.tabList.indexOf(tag), 1);
			  
			  this.$emit("change",this.tabList)
			},
			showInput() {
			  this.inputVisible = true;
			  this.$nextTick(_ => {
			    this.$refs.saveTagInput.$refs.input.focus();
			  });
			},
			handleInputConfirm() {
			  let inputValue = this.inputValue;
			  if (inputValue) {
			    this.tabList.push(inputValue);
				this.$emit("change",this.tabList)
			  }
			  this.inputVisible = false;
			  this.inputValue = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-tag + .el-tag {
	    margin-left: 10px;
	  }
	  .button-new-tag {
	    margin-left: 10px;
	    height: 32px;
	    line-height: 30px;
	    padding-top: 0;
	    padding-bottom: 0;
	  }
	  .input-new-tag {
	    width: 90px;
	    margin-left: 10px;
	    vertical-align: bottom;
	  }
</style>